<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Title</title>
</head>
<body>
	<button>点我</button>
</body>
<script>
	// 1-全局作用域下this指向window
	// console.log(this === window);// true
	// 2-通过var定义的变量以及通过function定义的函数会作为window下的属性与方法
	// var a = 100;
	// function fn(){
	// 	console.log("fn");
	// }
	//
	// console.log(window.a,this.a);// 100 100
	// window.fn();// fn
	// this.fn();// fn
// this是什么？
// - 一个关键字, 一个内置的引用变量
// - 在函数中都可以直接使用this
// - this代表调用函数的当前对象
// * 在定义函数时, this还没有确定, 只有在执行时才动态确定(绑定)。（函数当中的this是由执行时的环境决定的）
// 	var userName = "window"
// 	function fn(){
// 		console.log(this.userName);
// 	}
// 	const obj = {
// 		userName:"obj",
// 		fn
// 	}
// 	const obj2 = {
// 		userName:"obj2"
// 	}
// 	obj.fn();// obj
// 	fn();// window
// 	fn.call(obj2);// obj2
// 	fn.apply(obj2);// obj2
// 	fn.bind(obj2)();// obj2;
	
	// this的指向方式
	// **默认绑定** ：常用的函数调用类型：独立函数调用
	// * 可以把这个规则看作是无法应用其他规则的时候默认的规则，基本指向的是window
	// function fn(){
	// 	console.log(this);// window
	// }
	// fn();
	
	
	// **隐式绑定** ：如果函数调用时，前面存在调用它的对象，那么this就会隐式绑定到这个对象上
	// * 当函数引用有上下文对象的时候（obj），隐式绑定规则会把函数中的this绑定到这个上下文对象上
	// const obj = {
	// 	userName:"zhangsan",
	// 	fn(){
	// 		console.log(this);
	// 	}
	// }
	// obj.fn();
	
	// * 隐式绑定可能会出现隐式丢失的问题 ：被隐式绑定的函数，会丢失了绑定对象
	// const obj = {
	// 	userName:"zhangsan",
	// 	fn(){
	// 		console.log(this===obj,this.userName);// false undefined
	// 		console.log(this)
	// 	}
	// }
	// const fn = obj.fn;
	// fn();
	
	
	// function Box(){
	// 	this.userName = "wangwu";
	// }
	// Box.prototype.run = function(){
	// 	console.log(this.userName);
	// }
	// const obj = new Box();
	// obj.run();
	
	// **显式绑定**： 指我们通过call、apply以及bind方法改变this的行为，相比隐式绑定，我们能清楚的感知 this 指向变化过程。
	// const obj = {
	// 	userName:"wangwu",
	// 	fn(){
	// 		console.log(this);
	// 	}
	// }
	// const obj2 = {
	// 	userName:"obj2"
	// }
	// obj.fn.call(obj2);
	
	
	// **`new`绑定**：构造函数只是一些使用new操作符被调用的函数,使用new调用函数的时候，
	// 会构造一新的对象，这个时候 就把新的对象绑定给了函数的this上
	// function Box(){
	// 	setTimeout(function(){
	// 		console.log(this === obj);
	// 	})
	// }
	// const obj = new Box();
	
	document.querySelector("button").onclick = function(){
		console.log(this===document.querySelector("button"));
	}
	document.querySelector("button").click();
	
</script>
</html>